<script lang="ts">
import { Component, Inject, Vue, Watch } from 'vue-facing-decorator';
import { getNovelChapter } from '@/api/novel/novel';
import type { ChapterInfo } from '@/api/novel/novel';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import TextEditor from '@/components/editor/TextEditor.vue';
import type { UserInfo } from '@/api/auth/auth';
import UserLink from '@/pages/profile/component/UserLink.vue';
import ChapterPaging from './ChapterPaging.vue';
import CommentList from '../comment/CommentList.vue';

@Component({
  components: {
    ChapterPaging,
    TextEditor,
    UserLink,
    CommentList,
  },
})
export default class NovelChapterPage extends Vue {
  @Inject() userInfo!: UserInfo;
  get isMyNovel() {
    if (!this.userInfo?.id) return false;
    if (!this.chapter?.novel?.author?.id) return false;
    return this.userInfo.id === this.chapter.novel.author.id;
  }

  dayjs = dayjs;

  get nid() {
    return +(this.$route.params.nid + '');
  }
  get cid() {
    return +(this.$route.params.cid + '');
  }

  chapter: ChapterInfo | null = null;
  async initNovel() {
    const resp = await getNovelChapter(this.nid, this.cid);
    if (resp.error != null) {
      ElMessage({ type: 'error', message: resp.error });
      return;
    }
    this.chapter = resp.data;
  }
  @Watch('nid')
  @Watch('cid')
  onParamsChange() {
    this.chapter = null;
    this.initNovel();
  }

  mounted() {
    this.initNovel();
  }
}
</script>
<template>
  <div class="novel-chapter-page" v-if="chapter">
    <div class="novel-info">
      <router-link :to="'/novel/' + nid" class="novel-chapter-back">{{ chapter.novel.title }}</router-link>
    </div>
    <chapter-paging :chapter="chapter" />
    <div v-if="isMyNovel && !chapter.visibility" class="novel-chapter-visibility-warning">
      当前章节尚未发布，读者无法查看。如已完成撰写，请在<router-link :to="'/novel/' + nid + '/chapter/' + cid + '/edit'">编辑页面</router-link>中发布章节。
    </div>
    <div v-if="isMyNovel && chapter.visibility && (chapter.draft.title !== null || chapter.draft.content !== null)" class="novel-chapter-visibility-warning">
      当前章节包含未发布的草稿，您可以在<router-link :to="'/novel/' + nid + '/chapter/' + cid + '/edit'">编辑页面</router-link>中发布章节。
    </div>
    <div class="novel-chapter" v-if="chapter">
      <div class="novel-chapter-action-row" v-if="isMyNovel">
        <el-button class="novel-chapter-edit-button" tag="router-link" :to="'/novel/' + nid + '/chapter/' + cid + '/edit'" icon="el-icon-edit">编辑</el-button>
      </div>
      <div class="novel-chapter-title">
        <h1>{{ chapter.title }}</h1>
      </div>
      <div class="novel-chapter-metadata">
        <div class="novel-chapter-metadata-author">
          <user-link :user="chapter.novel.author" author />
        </div>
        <div class="novel-chapter-metadata-time">
          <time :datetime="chapter.updated_at">{{ chapter.updated_at ? dayjs(chapter.updated_at).format('YYYY年MM月DD日 HH:mm') : '--' }}</time>
        </div>
      </div>
      <div class="novel-chapter-content">
        <text-editor :model-value="chapter.content" readonly />
      </div>
    </div>
    <chapter-paging :chapter="chapter" />
    <comment-list v-if="chapter?.novel?.author" :cid="chapter.id" :author="chapter.novel.author" />
  </div>
</template>
<style scoped>
.novel-chapter-page {
  display: flow-root;
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  display: flow-root;
}

.tiny-mode .novel-chapter-page {
  padding: 0 10px;
}

.novel-info {
  margin-bottom: 20px;
}

.novel-chapter {
  margin-bottom: 20px;
}

.novel-chapter-visibility-warning {
  background: var(--el-color-warning-dark-2);
  padding: 20px;
  color: var(--el-bg-color);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
  margin: 20px 0;
}

.novel-chapter-visibility-warning a {
  color: var(--el-bg-color-overlay);
  font-weight: bold;
}

.novel-chapter-action-row a,
.novel-chapter-action-row button {
  float: right;
  text-decoration: none;
  margin-left: 0.5em;
}

.tiny-mode .novel-chapter-action-row {
  display: flow-root;
}

.novel-chapter-title {
  margin-bottom: 10px;
}

.novel-chapter-title h1 {
  margin: 0;
  font-size: 150%;
  font-weight: bold;
}

.novel-chapter-metadata {
  margin-bottom: 20px;
  color: var(--el-text-color-secondary);
  display: flex;
}

.novel-chapter-metadata-time {
  margin-left: auto;
}

.novel-chapter-content {
  margin-top: 20px;
}
</style>
